<template>
  <section class="asn-tabs">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      class="asn-tabs-wrap"
    >
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="(item, index) in tabsList"
        :key="index"
      />
    </el-tabs>
  </section>
</template>

<script>
export default {
  props: {
    tabsList: {
      type: Array,
      default: () => [],
    },
    active: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      activeName: this.active,
    };
  },
  methods: {
    handleClick(tab, event) {
      this.$emit("tabClick", tab.name, event);
    },
  },
};
</script>

<style lang="less" >
.asn-tabs {
  .asn-tabs-wrap {
    .el-tabs__item.is-active {
      color: #000;
      font-weight: 600;
    }
    .el-tabs__active-bar {
      background-color: #000;
    }
    .el-tabs__item:hover {
      color: #000;
    }
  }
}
</style>